<template>
	<view class="property-wrapper">
		<top-nav title="资产管理"></top-nav>
		<view class="list">
			<view class="icon icon1"></view>
			<view class="info">
				<view class="name">AGT</view>
				<view class="content">6.73 AGT</view>
			</view>
			<view class="btn">
				<view class="send" @click="gotoPage('/pages/share/send')">发送</view>
				<view class="get" @click="gotoPage('/pages/share/get')">接收</view>
			</view>
		</view>
		<view class="list">
			<view class="icon icon2"></view>
			<view class="info">
				<view class="name">USDT</view>
				<view class="content">6.73 USDT</view>
			</view>
			<view class="btn">
				<view class="send">发送</view>
				<view class="get">接收</view>
			</view>
		</view>
		<view class="detail-wrapper">
			<view class="title">账户明细</view>
			<view class="detail-content">
				<view class="detail-list green">
					<view class="circle"></view>
					<view class="left">
						<view class="info">待收</view>
						<view class="desc">sdak..sssss</view>
					</view>
					<view class="right">
						<view class="info">1 BTC</view>
						<view class="desc">2020-09-31 5:30</view>
					</view>
				</view>
				<view class="detail-list yellow">
					<view class="circle"></view>
					<view class="left">
						<view class="info">接收</view>
						<view class="desc">12312..sgdf</view>
					</view>
					<view class="right">
						<view class="info">+0.03 BTC</view>
						<view class="desc">2020-08-10 10:00</view>
					</view>
				</view>
				<view class="detail-list yellow">
					<view class="circle"></view>
					<view class="left">
						<view class="info">接收</view>
						<view class="desc">12312..sgdf</view>
					</view>
					<view class="right">
						<view class="info">+0.03 BTC</view>
						<view class="desc">2020-08-10 10:00</view>
					</view>
				</view>
				<view class="detail-list green">
					<view class="circle"></view>
					<view class="left">
						<view class="info">发送</view>
						<view class="desc">sdak..sssss</view>
					</view>
					<view class="right">
						<view class="info">-0.03 BTC</view>
						<view class="desc">2020-09-31 5:30</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import topNav from '../../components/top-nav/top-vue.vue';
	export default{
		components:{
			topNav:topNav
		},
		methods:{
			gotoPage(path){
				uni.navigateTo({
				    url: path
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.property-wrapper{
		padding-top:40rpx;
		.list{
			margin: 0 16rpx 20*2rpx;
			background: #69DA73;
			box-shadow: 0px 15*2rpx 40*2rpx 0px rgba(117, 117, 170, 0.08);
			border-radius: 3*2rpx;
			display:flex;
			align-items: center;
			padding:0 30rpx;
			height:160rpx;
			.icon{
				width:34*2rpx;
				height:34*2rpx;
				margin-right:30rpx;
				border-radius: 50%;
				background-size: 100% 100%;
				&.icon1{
					background-image: url('/static/property/icon1.png');
				}
				&.icon2{
					background-image: url('/static/property/icon1.png');
				}
			}
			.info{
				flex:1;
				.name{
					font-size:14*2rpx;
					color:#000;
				}
				.content{
					font-size:16*2rpx;
					color:#fff;
					margin-top:10rpx;
				}
			}
			.btn{
				display: flex;
				font-size:14*2rpx;
				.send{
					width: 60*2rpx;
					height: 26*2rpx;
					background: #FFB721;
					border-radius: 14px;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right:34rpx;
				}
				.get{
					width: 60*2rpx;
					height: 26*2rpx;
					background: #122614;
					border-radius: 14px;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
		.detail-wrapper{
			padding:0 20*2rpx;
			.title{
				font-size: 24*2rpx;
				margin-top:50*2rpx;
			}
			.detail-content{
				border-left: 1px solid #fff;
				margin:25*2rpx 0 0;
				padding-bottom:248*2rpx;
				.detail-list{
					display:flex;
					align-items: center;
					position:relative;
					padding-left:48rpx;
					margin-bottom:30rpx;
					.left{
						flex:1;
					}
					.right{
						text-align: right;
					}
					.info{
						font-size:14*2rpx;
						margin-bottom:10rpx;
					}
					.desc{
						font-size:10*2rpx;
						color:#8D8D8D;
					}
					.circle{
						position:absolute;
						width: 16*2rpx;
						height: 16*2rpx;
						border-radius: 50%;
						left:-16rpx;
						top:0;
					}
					&.green{
						.circle{
							background: #FFFFFF;
							border: 1px solid #69DA73;
							padding:2px;
							&:after{
								content:'';
								display: block;
								width:100%;
								height:100%;
								border-radius:50%;
								background-color: #69DA73;
							}
						}
						.left{
							.info{
								color:#69DA73;
							}
						}
						.right{
							.info{
								color:#FFB721;
							}
						}
					}
					&.yellow{
						.circle{
							background: #FFFFFF;
							border: 1px solid #FFB721;
							padding:2px;
							&:after{
								content:'';
								display: block;
								width:100%;
								height:100%;
								border-radius:50%;
								background-color: #FFB721;
							}
						}
						.left{
							.info{
								color:#FFB721;
							}
						}
						.right{
							.info{
								color:#69DA73;
							}
						}
					}
				}
			}
		}
	}
</style>
